"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DefaultPCStyleFormComponent = exports.DefaultMobileStyleFormComponent = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _form = _interopRequireDefault(require("../../form/src/form"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _input = _interopRequireDefault(require("../../input/src/input"));
var _group = _interopRequireDefault(require("../../radio/src/group"));
var _select = _interopRequireDefault(require("../../select/src/select"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getBoldOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.fontNormal'),
    value: false
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.fontBold'),
    value: true
  }];
};
const getColonOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.colonVisible'),
    value: true
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.colonHidden'),
    value: false
  }];
};
const getAlignOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.alignLeft'),
    value: ''
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.alignRight'),
    value: 'right'
  }];
};
const getWidthUnitOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.unitPx'),
    value: ''
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.styleSetting.unitPct'),
    value: '%'
  }];
};
const renderLayoutOption = (formData, field, type, changeEvent) => {
  const isVertical = type === 'vertical';
  return (0, _vue.h)('div', {
    class: ['vxe-form-design--widget-form-item-option', `is--${type}`, {
      'is--active': isVertical ? formData[field] : !formData[field]
    }],
    onClick() {
      formData[field] = isVertical;
      changeEvent();
    }
  }, [(0, _vue.h)('div', {
    class: 'vxe-form-design--widget-form-item-option-row'
  }), (0, _vue.h)('div', {
    class: 'vxe-form-design--widget-form-item-option-row'
  }), (0, _vue.h)('div', {}, isVertical ? (0, _core.getI18n)('vxe.formDesign.styleSetting.verticalLayout') : (0, _core.getI18n)('vxe.formDesign.styleSetting.horizontalLayout'))]);
};
const DefaultPCStyleFormComponent = exports.DefaultPCStyleFormComponent = (0, _vue.defineComponent)({
  name: 'DefaultPCStyleForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    const verticalField = 'pcVertical';
    const refBoldOpts = (0, _vue.ref)(getBoldOptions());
    const refColonOpts = (0, _vue.ref)(getColonOptions());
    const refAlignOpts = (0, _vue.ref)(getAlignOptions());
    const refWidthUnitOpts = (0, _vue.ref)(getWidthUnitOptions());
    const refreshPreview = () => {
      if ($xeFormDesign) {
        $xeFormDesign.refreshPreviewView();
      }
    };
    const changeLayoutEvent = () => {
      const {
        formData
      } = props;
      if (!formData.pcTitleWidth) {
        formData.pcTitleWidth = 100;
      }
      refreshPreview();
    };
    return () => {
      const {
        formData
      } = props;
      return (0, _vue.h)(_form.default, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          return [(0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
            field: verticalField
          }, {
            default() {
              return [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-layout'
              }, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
            }
          }), (0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.styleSetting.styleTitle')
          }, {
            default() {
              return [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.boldTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.pcTitleBold,
                options: refBoldOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleBold = val;
                }
              })]), (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.colonTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.pcTitleColon,
                options: refColonOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleColon = val;
                }
              })]), formData.pcVertical ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.alignTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.pcTitleAlign,
                options: refAlignOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleAlign = val;
                }
              })]), formData.pcVertical ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.widthTitle')), (0, _vue.h)(_input.default, {
                class: 'vxe-form-design--widget-form-item-prop-width',
                modelValue: formData.pcTitleWidth,
                type: 'integer',
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleWidth = val;
                }
              }), (0, _vue.h)(_select.default, {
                class: 'vxe-form-design--widget-form-item-prop-unit',
                modelValue: formData.pcTitleWidthUnit,
                options: refWidthUnitOpts.value,
                transfer: true,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleWidthUnit = val;
                }
              })])];
            }
          })];
        }
      });
    };
  }
});
const DefaultMobileStyleFormComponent = exports.DefaultMobileStyleFormComponent = (0, _vue.defineComponent)({
  name: 'DefaultMobileStyleForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    const verticalField = 'mobileVertical';
    const refBoldOpts = (0, _vue.ref)(getBoldOptions());
    const refColonOpts = (0, _vue.ref)(getColonOptions());
    const refAlignOpts = (0, _vue.ref)(getAlignOptions());
    const refWidthUnitOpts = (0, _vue.ref)(getWidthUnitOptions());
    const refreshPreview = () => {
      if ($xeFormDesign) {
        $xeFormDesign.refreshPreviewView();
      }
    };
    const changeLayoutEvent = () => {
      const {
        formData
      } = props;
      if (!formData.mobileTitleWidth) {
        formData.mobileTitleWidth = 100;
      }
      refreshPreview();
    };
    return () => {
      const {
        formData
      } = props;
      return (0, _vue.h)(_form.default, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          return [(0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
            field: verticalField
          }, {
            default() {
              return [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-layout'
              }, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
            }
          }), (0, _vue.h)(_formItem.default, {
            title: (0, _core.getI18n)('vxe.formDesign.styleSetting.styleTitle')
          }, {
            default() {
              return [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.boldTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.mobileTitleBold,
                options: refBoldOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleBold = val;
                }
              })]), (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.colonTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.mobileTitleColon,
                options: refColonOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleColon = val;
                }
              })]), formData.mobileVertical ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.alignTitle')), (0, _vue.h)(_group.default, {
                modelValue: formData.mobileTitleAlign,
                options: refAlignOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleAlign = val;
                }
              })]), formData.mobileVertical ? (0, _vue.createCommentVNode)() : (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0, _vue.h)('span', {}, (0, _core.getI18n)('vxe.formDesign.styleSetting.widthTitle')), (0, _vue.h)(_input.default, {
                class: 'vxe-form-design--widget-form-item-prop-width',
                modelValue: formData.mobileTitleWidth,
                type: 'integer',
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleWidth = val;
                }
              }), (0, _vue.h)(_select.default, {
                class: 'vxe-form-design--widget-form-item-prop-unit',
                modelValue: formData.mobileTitleWidthUnit,
                options: refWidthUnitOpts.value,
                transfer: true,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleWidthUnit = val;
                }
              })])];
            }
          })];
        }
      });
    };
  }
});